<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>超市会员主页</title>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
        #app {
            position: absolute;
            left: 50%;
            width: 60%;
            transform: translate(-50%, 0);
        }
        .goodsTable {
            float: left;
            width: 22.5%;
        }
        .goodsTable img {
            width: 100%;
        }
        el-button {
            float: right;
        }
        .buy {
            background: darkgreen;
            border: 0;
            border-radius: 3px;
            color: white;
            font-weight: bold;
            width: 50px;
            height: 30px;
        }
        .buy:hover {
            background: red;
        }
        form {
            border: 10px solid white;
        }
        form:hover {
            opacity: 0.75;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="info">
        <el-descriptions class="margin-top" title="会员信息" :column="3" :size="size" border>
            <template slot="extra">
                <el-button type="info" size="small" @click="logout" plain>退出登录</el-button>
                <el-button type="primary" size="small" @click="order" plain>消费记录</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    会员昵称
                </template>
                [[${session.member.getName()}]]
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    会员卡ID
                </template>
                [[${session.member.getCardId()}]]
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    会员卡等级
                </template>
                <div th:if="${session.member.getCardId().startsWith('S')}">
                    <el-tag type="info">
                        白银会员卡
                    </el-tag>
                </div>
                <div th:if="${session.member.getCardId().startsWith('G')}">
                    <el-tag type="warning">
                        黄金会员卡
                    </el-tag>
                </div>
                <div th:if="${session.member.getCardId().startsWith('D')}">
                    <el-tag>
                        钻石会员卡
                    </el-tag>
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <br/>
    <div id="goods">
        <h4>超市商品</h4>
        <form th:each="goods,stat : ${goodsList}" class="goodsTable" action="#">
            <img th:src="@{${goods.getImage()}}" alt="">
            <b style="color: grey">[[${goods.getName()}]]</b>
            <p style="float: left; color: orangered"><b>[[${goods.getPrice()}]]￥</b></p>
            <p style="float: right;">
                <label>
                    <input id="goodsId" name="id" th:value="${goods.getId()}" style="display: none">
                    <input class="buy" type="submit" value="购买"
                           th:onclick="buy([[${goods.getId()}]])">
                </label>
            </p>
        </form>
    </div>
</div>
<script th:inline="javascript">
    function buy(id){
        // 提交订单
        $.get("/member/buy",{id:id},function (data) {});
        var flag = prompt('订单已提交，请输入支付密码完成支付（123456）');
        if (flag) {
            if (flag === '123456') {
                // 订单支付
                $.get("/member/nopay",function (data) {
                    if (data === 1) {
                        alert('支付成功！货物将飞速到您身边');
                        window.location.assign("/member/order");
                    }
                });
                return true;
            } else {
                alert('支付密码错误，请重试~！');
                return false;
            }
        } else {
            alert('未支付的订单可到消费记录页面查看~！');
            return false;
        }
    }

    var Main = {
        methods: {
            logout() {
                window.location = "/member/logout"
            },
            order() {
                window.location = "/member/order"
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app')
</script>
</body>
</html>